<template>
	<page-loading :show="resultData">
		<view class="wrap">
			<view class="mb140">
				<view class="headerBg">{{ statusList[resultData.status] }}</view>
				<view class="list mart40p">
					<view class="title">
						<view class="headImg"><image :src="resultData.headportrait" mode=""></image></view>
						<view class="shopName">
							{{ resultData.nickname }}
							<i-icon icon="iconfanhui" type="single" class="mr-5 middle rotate180" size="30rpx" color="#333"></i-icon>
						</view>
					</view>
					<view class="listItem">
						<view class="left">
							<view class="carImg"><image :src="'https://files.yzsheng.com/goodimg/brandimg/' + resultData.brand_id + '.png'" mode="aspectFit"></image></view>
							车型 :
						</view>
						<view class="right">{{ resultData.car_type_name }}{{ resultData.configuration_name }}</view>
					</view>
					<view class="listItem">
						<view class="left">外观内饰：</view>
						<view class="right">
							<!-- {{resultData.color}} -->
							<!-- 	<view :style="{ background: it.color.outerColour.colorCoding }" class="iconcolor"></view>
							{{ it.color.outerColour.color }} /{{ it.color.inColour.color }}
							<view v-if="it.color.inColour.colorCoding.split('/').length == 1" :style="{ background: it.color.inColour.colorCoding }" class="iconcolor"></view>
							<view v-else class="iconcolor"><view class="iconcolor2" v-for="(it, i) in it.color.inColour.colorCoding.split('/')" :key="i" :style="{ background: it }"></view>
							</view> -->
						</view>
					</view>
					<view class="listItem">
						<view class="left">预约门店：</view>
						<view class="right">{{ resultData.storename }}</view>
					</view>
					<view class="listItem">
						<view class="left">到店时间：</view>
						<view class="right">{{ resultData.book_time }}</view>
					</view>
					<view class="listItem">
						<view class="left">电话：</view>
						<view class="right">{{ resultData.mobile }}</view>
					</view>
					<view class="bottom-flex">
						<view class="width-50 u-text-center u-border-right" @click="contactSeller">
							<i-icon icon="iconxiaoxi1" type="multiple" class="middle marr5" size="34rpx"></i-icon>
							联系买家
						</view>
						<view class="width-50 u-text-center" @click="call">
							<i-icon icon="icondianhua" type="multiple" class="middle marr5" size="34rpx"></i-icon>
							致电买家
						</view>
					</view>
				</view>
				<view class="list">
					<view class="title"><view class="font-28 color-333">订单信息</view></view>
					<view class="listItem">
						<view class="width-30 color-999">订单号：</view>
						<view class="width-70 color-333 flex">
							<view class="width-80">{{ resultData.serial_number }}</view>
							<view class="width-20 copy" @click="copy(resultData.serial_number)">复制</view>
						</view>
					</view>
					<view class="listItem">
						<view class="width-30 color-999">预约发起时间：</view>
						<view class="width-70 color-333">{{ resultData.addtime }}</view>
					</view>
					<view class="listItem" v-if="resultData.status === 2 || resultData.status === 3">
						<view class="width-30 color-999">到店时间：</view>
						<view class="width-70 color-333">{{ resultData.book_time }}</view>
					</view>
					<view class="listItem" v-if="resultData.status === 4">
						<view class="width-30 color-999">成交时间：</view>
						<view class="width-70 color-333">{{ resultData.complete_time }}</view>
					</view>
					<view class="listItem" v-if="resultData.status === 2 || resultData.status === 3">
						<view class="width-30 color-999">接待人：</view>
						<view class="width-70 color-333">{{ resultData.sellername }}</view>
					</view>
					<view class="listItem" v-if="resultData.status === 5">
						<view class="width-30 color-999">取消时间：</view>
						<view class="width-70 color-333">{{ resultData.cancletime }}</view>
					</view>
				</view>
			</view>
			<view class="fixedBottomBtn">
				<view class="btnWrap">
					<!-- 待到店 -->
					<view class="left width-50" v-if="resultData.status === 1" @click="UpdateCarBook(3)"><text>取消到店</text></view>
					<!-- 已到店 -->
					<view class="left width-50" v-else-if="resultData.status === 2" @click="UpdateCarBook(2)"><text>未成交</text></view>
					<!-- 未成交	已成交 已取消 -->
					<view class="left width-50" v-else>
						<i-icon icon="iconxiaoxi" type="single" class="middle marr5" size="34rpx" color="#FFE03B"></i-icon>
						<text>联系客户</text>
					</view>
					<!-- 待到店 -->
					<view class="right width-50" v-if="resultData.status === 1" @click="UpdateCarBook(0)"><text>确认到店</text></view>
					<!-- 已到店 -->
					<view class="right width-50" v-else-if="resultData.status === 2" @click="UpdateCarBook(1)"><text>成交</text></view>
					<!-- 未成交	已成交 已取消 -->
					<view class="right width-50" @click="call" v-else>
						<i-icon icon="iconlianxi" type="single" class="middle marr5" size="34rpx" color="#333"></i-icon>
						<text>致电客户</text>
					</view>
				</view>
			</view>
		</view>
	</page-loading>
</template>

<script></script>
<script>
// import { sendMsg } from './common.js';
import { AddMobileContactData } from '@/utils/common-api.js';
export default {
	data() {
		return {
			resultData: {},
			statusList: ['全部', '待到店', '已到店', '未成交', '已成交', '已取消']
		};
	},
	props: ['status', 'id', 'pageFrom'],
	created() {
		this.GetCarBookDetails();
		console.log(this.commonfun);
	},
	methods: {
		// 复制
		copy(data) {
			uni.setClipboardData({
				data: data,
				success: function() {
					console.log('success');
				}
			});
		},
		// 拨打电话
		call() {
			AddMobileContactData(this.$store.state.userInfoDetail.store.storeId);
			uni.makePhoneCall({
				phoneNumber: this.resultData.mobile //仅为示例
			});
		},
		//联系买家
		contactSeller() {
			if (this.pageFrom === 'chat') {
				uni.navigateBack();
				return;
			}
			AddMobileContactData(this.$store.state.userInfoDetail.store.storeId);
			this.$store.commit('news/createConversationActive', {
				user: this.resultData.truename, //店铺名称
				img: this.resultData.headportrait, //店铺头像
				lastTime: '', //
				userId: this.resultData.uid, //店铺id
				conversationID: 'C2C' + this.resultData.uid
			});
			this.$store.commit('news/setCardInfo', {
				imgSrc: 'https://files.yzsheng.com/goodimg/brandimg/' + this.resultData.brand_id + '.png',
				name: this.resultData.car_type_name + ' ' + this.resultData.configuration_name,
				price: this.resultData.factoryprice,
				labelPrige: '',
				type: 'resaleCar',
				goPage: '1' //客户端页面跳转参数
			});
			uni.navigateTo({
				url: '/pages_news/contactSeller/contactSeller?user=' + this.resultData.truename + '&pageId=' + this.resultData.id + '&tab=0'
			});
		},
		// 获取数据
		async GetCarBookDetails() {
			uni.showLoading({
				title: '加载中'
			});
			const res = await this.$api.carOrder.GetCarBookDetails({ id: this.id });
			try {
				uni.hideLoading();
				console.log(res);
				res.data.color = JSON.parse(res.data.color)[0];
				this.resultData = res.data;
			} catch (err) {
				uni.hideLoading();
				console.log(err);
			}
		},
		// 操作数据
		async UpdateCarBook(type) {
			// type0、确认到店 1、成交 2、未成交 3、取消
			uni.showLoading({
				title: '正在操作'
			});
			let data = {
				id: this.id,
				type: type
			};
			const res = await this.$api.carOrder.UpdateCarBook(data);
			try {
				uni.hideLoading();
				console.log(res);
				uni.showToast({
					title: '操作成功',
					duration: 2000,
					icon: 'success'
				});
				this.$nextTick(() => {
					uni.redirectTo({
						url: '/pages_order/orderAdmin/orderAdmin'
					});
				});
			} catch (err) {
				uni.hideLoading();
				console.log(err);
				uni.showToast({
					title: '请稍后重试',
					duration: 2000,
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
@import '../retailOrder.scss';
</style>
